import React from 'react';

// 导入类名选择库
import classNames from 'classnames';
// 时间日期处理库
import dayjs from 'dayjs';
// lodash
import _ from 'lodash';

// 导入样式
import './CommentList.css';
// 导入头像图片
import avatar from './avatar.jpg';

export class CommentList extends React.Component {
  constructor() {
    super();
    // 页面数据
    this.state = {
      // hot: 热度排序  time: 时间排序
      tabs: [
        {
          id: 1,
          name: '热度',
          type: 'hot',
        },
        {
          id: 2,
          name: '时间',
          type: 'time',
        },
      ],
      active: 'hot',
      list: [
        {
          id: 1,
          author: '刘德华',
          comment: '给我一杯忘情水',
          time: '2021-10-10 09:09:00',
          // 1: 点赞 0：无态度 -1:踩
          attitude: 1,
        },
        {
          id: 2,
          author: '周杰伦',
          comment: '哎哟，不错哦',
          time: '2021-10-11 09:09:00',
          // 1: 点赞 0：无态度 -1:踩
          attitude: 0,
        },
        {
          id: 3,
          author: '五月天',
          comment: '不打扰，是我的温柔',
          time: '2021-10-11 10:09:00',
          // 1: 点赞 0：无态度 -1:踩
          attitude: -1,
        },
      ],
      // 用户输入的评论内容
      txt: '',
    };
    // 定义DOM容器
    this.txtRef = React.createRef();
  }

  // 用户输入事件处理
  handleTxt = (e) => {
    // 设置页面状态
    this.setState({
      txt: e.target.value,
    });
  };

  // 发表评论事件处理函数
  addComment = () => {
    // 评论数据检查
    // if (this.state.txt.trim().length === 0) {
    if (!this.state.txt.trim()) {
      // return this.txtRef.current.focus()
      this.txtRef.current.focus();
      return;
    }

    // 往当前评论列表追加一条评论
    // 往数组中追加一个元素，放到最前面 arr.unshift()
    const comment = {
      id: Math.random(),
      author: '杨文中',
      comment: this.state.txt,
      time: new Date().toLocaleString(),
      attitude: 1,
    };
    this.setState({
      // 更新评论列表
      list: [comment, ...this.state.list],
      // 清空评论内容
      txt: '',
    });
    // 设置输入框焦点
    this.txtRef.current.focus();
  };

  // 删除评论
  delComment = (id, e) => {
    console.log(id, e);
    // 修改数组
    // 1、使用 filter 删除某一个数组元素
    const newList = this.state.list.filter((item) => item.id !== id);
    this.setState({
      list: newList,
    });
    // // 2、用map
    // const newList2 = this.state.list.map((item) => {
    //   if (item.id !== id) {
    //     return item;
    //   }
    // });
    // 3、从数组中删除一个元素
    // 找下标
    // const index = this.state.list.findIndex((item) => item.id === id);
    // this.state.list.splice(index, 1);
    // this.setState({
    //   list: this.state.list,
    // });
  };

  // 点赞点踩事件处理函数
  changeAttitude = (id, attitude) => {
    console.log(id, attitude);
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        return { ...item, attitude };
      } else {
        return item;
      }
    });
    // 设置页面状态
    this.setState({
      list: newList,
    });
  };

  // 评论排序事件处理
  changeSortType = (type) => {
    console.log(type);
    // 如果用户点击的是hot我们按照id来排序
    if (type === 'hot') {
      const newList = this.state.list.sort((a, b) => {
        // 按照id降序
        return b.id - a.id;
      });

      this.setState({
        list: newList,
        active: type,
      });
    } else {
      // const newList = this.state.list.sort((a, b) => {
      //   // 按照时间升序
      //   // return new Date(a.time).getTime() - new Date(b.time).getTime();
      //   // 时间降序
      //   return new Date(b.time).getTime() - new Date(a.time).getTime();
      // });

      // 使用第三方库的排序api
      const sorted = _.orderBy(this.state.list, ['time'], ['desc']);
      this.setState({
        list: sorted,
        active: type,
      });
    }
  };

  render() {
    console.log(this.state.txt);
    return (
      <div className="comment-root">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-number">
            <span> {this.state.list.length} 评论</span>
          </div>
          {/* 排序tab */}
          <div className="tabs-order">
            {/* 类on选中效果 */}
            {this.state.tabs.map((item, index) => (
              <div
                className={classNames({ on: item.type === this.state.active })}
                // className={item.type === this.state.active ? 'on' : ''}
                key={index}
                onClick={() => this.changeSortType(item.type)}
              >
                按{item.name}排序
              </div>
            ))}
          </div>
          {/* 发表评论区 */}
          <div className="comment-send-container">
            <div>
              <img className="user-head" src={avatar} alt="头像" />
            </div>
            <div className="comment-send">
              <div className="textarea-container">
                <textarea
                  cols="80"
                  rows="5"
                  placeholder="发条友善的评论"
                  className="ipt-txt"
                  value={this.state.txt}
                  onChange={this.handleTxt}
                  ref={this.txtRef}
                />
                <button onClick={this.addComment} className="comment-submit">
                  发表评论
                </button>
              </div>
            </div>
          </div>
          {/* 评论列表区 */}
          <div className="comment-list">
            {this.state.list.map((item, index) => (
              <div key={index} className="comment-item">
                <div>
                  <img className="user-head" src={avatar} alt="头像" />
                </div>

                <div className="comment">
                  {/* 评论人 */}
                  <div className="user">{item.author}</div>
                  {/* 评论内容 */}
                  <p className="text">{item.comment}</p>
                  <div className="info">
                    <span className="time">
                      {dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}
                    </span>
                    <span
                      className={item.attitude === 1 ? 'like liked' : 'like'}
                      onClick={() =>
                        this.changeAttitude(
                          item.id,
                          item.attitude === 1 ? 0 : 1
                        )
                      }
                    >
                      <i className="icon" />
                    </span>
                    <span
                      className={item.attitude === -1 ? 'hate hated' : 'hate'}
                      onClick={() =>
                        this.changeAttitude(
                          item.id,
                          item.attitude === -1 ? 0 : -1
                        )
                      }
                    >
                      <i className="icon" />
                    </span>
                    <span
                      className="btn-hover"
                      onClick={(e) => this.delComment(item.id, e)}
                    >
                      删除
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default CommentList;
